<template>
  <div>
    <div
      v-if="areaData.length > 0"
      ref="barCharts"
      v-loading="loading"
      style="width: 100%; height: 418px"
    />
    <el-empty v-else description="暂无数据" />
  </div>
</template>

<script>
import * as echarts from 'echarts'
import semApi from '@/api/baidu'
export default {
  props: ['siteId'],
  data() {
    return {
      areaData: '',
      maxValue: '',
      loading: false,
      site_id: ''
    }
  },
  watch: {
    // 监听到数据变化以后 重新调用一下
    siteId(val, value) {
      this.site_id = val
      this.$nextTick(() => {
        // this.getArea()
      })
    }
  },
  created() {
    this.site_id = this.siteId
    if (this.site_id) {
      // this.getArea()
    }
  },
  mounted() {},
  methods: {
    // 用户地区分步
    getArea() {
      this.loading = true
      semApi.areaList({ site_id: this.site_id }).then(res => {
        const arr = []
        const arr2 = []
        res.data.forEach(el => {
          arr.push({
            name: el.name,
            value: el.pv_count,
            // pv_count: el.pv_count,
            pv_ratio: el.pv_ratio
          })
          arr2.push(el.pv_count)
        })
        this.areaData = arr.splice(0, 8)

        arr2.sort(function (a, b) {
          return b - a
        })
        // 排序 取到最大值
        this.maxValue = arr2[0]
        this.$nextTick(() => {
          if (this.areaData.length > 0) {
            this.init() // 执行echarts
          }
        })
        this.loading = false
      })
    },

    init() {
      var data1 = []
      var data2 = []
      this.areaData.forEach(el => {
        data1.unshift(el.name)
        data2.unshift(el.value)
      })
      var option = {
        tooltip: {
          trigger: 'axis',
          show: false,
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          selectedMode: false
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            splitLine: {
              show: true, // 保留网格线
              lineStyle: {
                color: 'rgba(208,210,218,0.4)'
              }
            },
            type: 'value',
            show: true,
            axisLine: {
              lineStyle: {
                color: '#fff' // 坐标轴的样式
              }
            },
            axisLabel: {
              textStyle: {
                color: '#333' // 坐标轴数值样式
              }
            }
          }
        ],
        yAxis: [
          {
            splitLine: {
              show: false
            },
            axisLine: {
              // y轴
              show: false,
              lineStyle: {
                color: '#333'
              }
            },
            type: 'category',
            axisTick: {
              show: false
            },
            data: data1,
            // data: ['0~5岁', '5~10岁', '10-30岁', '30-50岁', '50-70岁', '70-100', '100以上'],
            axisLabel: {}
          }
        ],
        series: [
          {
            type: 'bar',
            barWidth: 20, // 柱子宽度
            itemStyle: {
              barBorderRadius: [0, 0, 0, 0], // 圆角（左上、右上、右下、左下）
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                1,
                0,
                ['#fe8023', '#fab51e'].map((color, offset) => ({
                  color,
                  offset
                }))
              ) // 渐变
            },
            data: data2
            // data: [320, 302, 341, 374, 390, 650, 420]
          }
        ]
      }
      var myEcharts = echarts.init(this.$refs.barCharts)
      myEcharts.setOption(option)
      window.addEventListener('resize', () => {
        myEcharts.resize()
      })
    }
  }
}
</script>

<style scoped></style>
